<template>
  <div class="wrap">
  		<div class="app-header"><header-v></header-v></div>
  		
  		<div class="app-content">
  			<!-- map -->
  			<div id="map">
  				<iframe src="http://192.168.1.219:8111/project/project_1/src/pages/public/map.vue" width="100%" height="150px"></iframe>
  			</div>
  			
  			<div class="ta_content">
  				<panel :list="info" :type="type" class="panel panels"></panel>
  				<panel :list="brief" :type="type" class="panel2 panels"></panel>
  			</div>
  			
  			<div class="contact">
  				<div class="reg_form">
	  				<form action="/#" @submit.prevent="submit" method="post">
	  					<group>
						    <x-input ref="info_1" :show-clear="false" required placeholder="公司名称"></x-input>
						  </group>
						  <group>
						    <x-input ref="info_2" :show-clear="false" :type="'number'" is-type="china-mobile" required placeholder="联系方式"></x-input>
						  </group>
						  <group>
						    <x-textarea ref="info_3" :show-clear="false" autosize :max="280" placeholder="公司简介、联系人姓名等"></x-textarea>
						  </group>
						  <x-button type="default">提交</x-button>
						</form>
						
	   				<div v-transfer-dom>	
							<x-dialog v-model="bool" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
				        <p style="color:#fff;text-align:center;" @click="bool = false">
				          <span style="font-size:0.25rem;">恭喜您!提交成功!</span>
				          <br>
				          <br>
				          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
				        </p>
				      </x-dialog>
				    </div>
				    
				    <div v-transfer-dom>	
							<x-dialog v-model="bool2" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
				        <p style="color:#fff;text-align:center;" @click="bool2 = false">
				          <span style="font-size:0.25rem;">对不起!您的输入有误!</span>
				          <br>
				          <br>
				          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
				        </p>
				      </x-dialog>
				    </div>
				    
  			</div>
  		</div>
  	</div>
  	
  	<div class="app-footer"><footer-v></footer-v></div>
  </div>
</template>

<script>
import header from '../public/header'
import footer from '../public/footer'
import { Panel, XInput, Group, XTextarea, XButton, XDialog, TransferDomDirective as TransferDom } from 'vux' 

import src from '../../assets/contact_icon_1.gif'
import src_2 from '../../assets/contact_icon_2.gif'
import src_3 from '../../assets/contact_icon_3.gif'
import src_4 from '../../assets/gs.png'

export default {
  components: {
  	headerV : header,
  	footerV : footer,
  	Panel, XInput, Group, XTextarea, XButton, XDialog
  },  
  directives: {
    TransferDom
  },
  data () {
    return {
    	type : '1',
    	bool : false,
    	bool2 : false,
    	info : [
  			{
  				src : src,
  				title : '地址',
  				desc : '上海市徐汇区漕宝路6x号'
  			},
  			{
  				src : src_2,
  				title : '邮箱',
  				desc : '176641494xx@qq.com'
  			},
  			{
  				src : src_3,
  				title : '微信',
  				desc : '1561897763x（某先生）'
  			}
    	],
    	brief : [
    		{
    			src : src_4,
    			desc : '上海新迹展览服务有限公司是一家专业展览会组织、策划机构，公司一贯致力于加强国内外'
    		},
    		{
    			desc : '各行业的经济、贸易、技术的交流与合作，拥有一支精通会展市场运作、对工作兢兢业业、一丝不苟、对客户认真负责、服务周到的专业展览服务队伍。长期以来，我公司本着“加强交流、促进合作、拓展市场、互利双赢”的宗旨，与客户坦诚相待，尊重客户利益尊重市场。市场竞争的不断规范以及客户群体的日趋成熟，在展览市场上形成了新的推动力量。真诚，是新迹公司与每一客户之间的天然纽带；服务，成为新迹公司成长发展的关键；新迹秉承诚实做人，诚信办展、务实创新之理念，立足华东，面向全国，走向世界。未来属于诚信务实、脚踏实地的进取者！'
    		}
    	]
    }
  },
  methods : {
  	submit : function (ev){
  				
	  		//找到input 判断是否为空~
	  		var info = this.$refs.info_1.$el.getElementsByClassName('weui-input')[0];
	  		var info2 = this.$refs.info_2.$el.getElementsByClassName('weui-input')[0];
	  		var info3 = this.$refs.info_3.$el.getElementsByClassName('weui-textarea')[0];	

	  		if(this.$refs.info_1.$el.className == 'vux-x-input weui-cell' && this.$refs.info_2.$el.className == 'vux-x-input weui-cell' && this.$refs.info_3.$el.className == 'weui-cell vux-x-textarea' && info.value != '' && info2.value != '' && info3.value != ''){
	  			
	  			this.bool = !this.bool;
	  		
	  		}else{
	  			
	  			this.bool2 = !this.bool2;
	  			
	  		}
  		
  	}
  }
}

</script>

<style type="text/css">
	/* contact.style */
	
	#map{
		width: 100%; height: 2rem;
	}
	#map iframe{
		width: 100%; height: 100%;
	}
	.ta_content{
		padding: 0.1rem 0.04rem;
	}
	.ta_content .weui-media-box__title{
		color: #808080; line-height: 0.3rem; margin-top: -0.05rem; font-size: 0.18rem;
	}
	.ta_content .weui-media-box__desc{
		color: #A9A9A9; font-size: 0.12rem;
	}
	.ta_content .weui-panel img{
		width: 0.6rem !important; height: 0.6rem !important;
	}
	.weui-media-box_appmsg .weui-media-box__thumb{
		max-height: none;
	}
	.weui-media-box__hd{
		width: 0.6rem !important; height: 0.6rem !important;
	}
	.ta_content .panel{
		background: #f9f9f9; 
	}
	.ta_content .panel2 .weui-media-box__desc{
		-webkit-line-clamp: inherit; line-height: 0.2rem; 
	}
	.contact .reg_form{
		padding:0 !important;  margin-top: 0.6rem;
	}
	.contact .weui-btn{
		width: 90% !important; background: #1bbc9b !important; color:#fff; margin: 0.1rem auto;
	}
	.vux-input-icon.weui-icon-warn:before, .vux-input-icon.weui-icon-success:before{
		font-size: 0.15rem !important;
	}
	#Layer_1{
		width: 0.24rem; height: 0.24rem;
	}
	
	.reg_content .shake {
		-webkit-animation: shake 900ms linear; animation: shake 900ms linear;
	}

	.reg_form input{
		border: 0.01rem solid #dcdcdc; color: #666; text-indent: 1em; height: 0.4rem; font-size: 0.14rem; border-radius: 0.04rem; color: #666;
	}
	.reg_form textarea{
		border: 0.01rem solid #dcdcdc; height: 1rem; color: #666; text-indent: 0.8em; font-size: 0.14rem; margin-bottom: 0.1rem; border-radius: 0.04rem; padding: 0.08rem 0; 
	}
	.reg_form .weui-btn{
		margin: 0.25rem auto; width:40% !important; padding: 0.04rem 0; color: #fff !important; font-size: 0.14rem !important; background: #c09f66 !important; border-radius: 0.2rem !important; text-align: center; line-height: 0.3rem;
	}
	.reg_form .weui-btn:after{
		border: none !important;
	}
	.reg_form .weui-cells:before,.weui-cells:after{
		border: none !important;
	}
	.reg_form .weui-cell{
		padding:0 0.15rem !important ;
	}
	input:focus,textarea:focus{
		border: 0.01rem solid #66afe9; -webkit-box-shadow:0.01rem 0.01rem 0.04rem rgba(102,175,233,0.7);
	}
</style>